
<template>
  <div>
    <el-container>
      <!-- 头部 -->
      <el-header>
        <navigation-bar> </navigation-bar>
      </el-header>
      <!-- 轮播图 -->
      <slide-show> </slide-show>

      <!-- 中段分类栏 -->
      <middle-navigation-bar></middle-navigation-bar>
      <el-container>
        <el-container>
          <!-- 内容 -->
          <el-main>
            <router-view
              :CommentRecommend="CommentRecommend"
              :ViewsRecommend="ViewsRecommend"
            ></router-view>
          </el-main>
        </el-container>

        <!-- 右部 -->
        <el-aside width="250px">
          <top-search
            :AdminRecommend="AdminRecommend"
            :CommentRecommend="CommentRecommend"
            :ViewsRecommend="ViewsRecommend"
          ></top-search>
        </el-aside>
      </el-container>
      <!-- 底部 -->
      <el-footer>
        <span>
          Copyright © 2021-2021 就爱科技 版权所有. All rights reserved.
        </span>
        <span>闽ICP备xxxxxxxx号</span>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import SlideShow from "./SlideShow/SlideShow.vue";
import NavigationBar from "./NavigationBar/NavigationBar.vue";
import MiddleNavigationBar from "./NavigationBar/MiddleNavigationBar.vue";
import TopSearch from "./Views/TopSearch.vue";
import { GetAdminRecommend, GetCommentRecommend, GetViews } from "../api/index";
export default {
  components: {
    SlideShow,
    NavigationBar,
    MiddleNavigationBar,
    TopSearch,
  },
  data() {
    return {
      AdminRecommend: [],
      CommentRecommend: [],
      ViewsRecommend: [],
      CommentRecommendCount: 0,
      ViewsRecommendCount: 0,
    };
  },
  methods: {
    getAdminRecommendArcle() {
      GetAdminRecommend()
        .then(({ data }) => {
          var res = data.data;

          if (res.length > 0) {
            this.AdminRecommend = res;
          } else {
            this.AdminRecommend = [
              {
                title: "还没有推荐哟~",
                id: 0,
              },
            ];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    GetCommentRecommendArcle() {
      GetCommentRecommend()
        .then(({ data }) => {
          var res = data.data;
          var count = data.count;
          res.forEach((element) => {
            count.forEach((eleCount) => {
              if (element.id === eleCount.articleId) {
                element.CommentCount = eleCount.count;
              }
            });
            if (!element.CommentCount) {
              element.CommentCount = 0;
            }
          });
          this.CommentRecommend = res;
          // console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    GetViewsRecommendArcle() {
      GetViews()
        .then(({ data }) => {
          var res = data.data;
          var count = data.count;
          // console.log(res);
          // console.log(count);
          res.forEach((element) => {
            count.forEach((eleCount) => {
              if (element.id === eleCount.articleId) {
                element.viewsCount = eleCount.count;
              }
            });
            if (!element.viewsCount) {
              element.viewsCount = 0;
            }
          });
          // this.ViewsRecommendCount = data.count;
          this.ViewsRecommend = res;
          // console.log(res);
          // console.log(data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getAdminRecommendArcle();
    this.GetCommentRecommendArcle();
    this.GetViewsRecommendArcle();
  },
};
</script>

<style >
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0;
}

.el-aside {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  /* line-height: 200px; */
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  /* min-height: calc(730px - 50px); */
  min-height: calc(700px - 50px);
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
body {
  margin: 0;
  /* height: 100%; */
  min-width: 1024px;
  max-width: 100%;
  margin: auto;
}
</style>